import React from 'react'
import styles from './grid.less'
export default class Grid extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isActive: false,
    }
  }

  handleClick = userId => {
    this.props.onClick(userId)
  }

  render() {
    const { data } = this.props
    return (
      <div className={styles.gridBox}>
        { data[0]? data.map(item => {
          return (
            <div
              className={styles.userItem}
              key={item.userId}
            >
              {
                item.avatar ? <img
                  className={styles.avatart}
                  onClick={() => {
                    this.handleClick(item.userId)
                  }}
                  alt={''}
                  src={item.avatar}
                /> :
                  <span
                    className={styles.avatart}
                    onClick={() => {
                      this.handleClick(item.userId)
                    }} >
                    {item.userName.split(")")[0].split("(")[1]}
                  </span>
              }
                <p className={styles.nickname} >{item.userName.split("(")[0]}</p>
            </div>
          )
        }):''}
        
      </div>
    )
  }
}
